$(function(){
  // 功能一：初始化裁剪效果
  var $image = $('#image');


  const optons = {

    // 裁剪框的宽高比例
    aspectRatio: 1,
    // 设置预览效果
    preview: '.img-preview',
  }
 
  $image.cropper(optons)

  

  // 功能二：更换裁剪图片
  $('#btnChooseImage').on('click',function(){
    // 手动触发文件选择框的点击事件
    $('#file').click()
  })

  // 监听文件选择框的change事件
  /* 
    判断是否选择文件
    获取上传的文件的信息
    将文件对象转换成路基的形式
    将路径设置给图片的src属性
  */
 $('#file').on('change',function(){
  const fileInfo = this.files
  if(fileInfo.length === 0) return layer.msg('请选择上传的图片')
  const file = fileInfo[0]
  const url = URL.createObjectURL(file)
  // 将路径设置给图片的src属性
  /* 
     先销毁裁剪区域
     给image换图
     再次重新初始化裁剪区域
  */

  $image.cropper('destroy')
  $image.attr('src',url)
  $image.cropper(optons)
 })

 //功能三：点击确定更换头像
 /* 
   【1】给"确定"注册点击事件
   【2】获取裁剪之后的图片(base64格式的字符串)
   【3】发起Ajax请求
   【4】判断成功与否
   【5】请求成功之后，同步更改index.html的用户头像
 */  
  $('#btnUpload').on('click',function(){
    const data = $image.cropper('getCroppedCanvas',{
      width: 100,
      height: 100
    }).toDataURL()
    // console.log(data);

    $.ajax({
      method : 'post',
      url: '/my/update/avatar',
      data: {
        avatar: data
      },
      success: function(res){
        if(res.suatus !== 0) layer.msg(res.message,{icon:5})
        layer.msg(res.message,{icon:6})
        window.parent.renderUserInfo()
      }
    })
  })
})